<template>
  <div>
    <h2>App组件</h2>
    <!-- 用自定义属性的方式，给子组件传递数据 -->
    <!-- 写法：  属性="值" -->
    <!-- 如果，如果，如果属性值是变量，才需要加 冒号 -->
    <!-- <GoodsList :username="uname" :age="age" sex="男" /> -->
    <GoodsList
      v-for="item in list"
      :key="item.id"
      :id="item.id"
      :pname="item.pname"
      :price="item.price"
      :info="item.info"
      @kanyidao="changePrice"
    />
  </div>
</template>

<script>
// 1. 导入组件
import GoodsList from '@/components/GoodsList.vue'
export default {
  data () {
    return {
      uname: 'zs',
      age: 20,
      list: [
        { id: 101, pname: '超级无敌棒棒糖', price: 15, info: '好吃，再来一根' },
        { id: 171, pname: '超级解渴水果茶', price: 80, info: '好甜，真好喝' },
        { id: 191, pname: '超级好吃大鸡腿', price: 60, info: '可口，下饭~' }
      ]
    }
  },
  // 2. 注册组件
  components: {
    GoodsList
  },
  methods: {
    changePrice (id) {
      console.log(id)
      const row = this.list.find(item => item.id === id)
      if (row.price <= 0.01) {
        row.price = 0.01
      } else {
        row.price = (row.price / 2).toFixed(2)
      }
    }
  }
}
</script>

<style></style>
